import React, { Component } from 'react';
import styled from 'styled-components';
import axios from '../util/axios'
import format from '../util/format';
import src2 from '../images/search2.png'
import '../css/style.css'

const SearchDiv = styled.div`
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.head{
    height: 40px;
    width: 100%;
    background-color: #dd3635;
    display: flex;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
}
.content{
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}


.content>ul>li{
    display: flex;
    height: 100px;
    border-bottom: 1px solid #f3f3f3;
    box-sizing: border-box;
    padding-top: 14px;
    padding-bottom: 14px;
}
.content>ul>li:last-child{
    border-bottom: 0;
}

.info{
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px;
}


.title{
    font-size: 18px;
    color: #222222;
    overflow:hidden;
    display:-webkit-box;
    text-overflow:ellipsis;
    -webkit-line-clamp:2; 
    -webkit-box-orient:vertical; 
    white-space:normal;
}

.something{
    color: #a5a5a5;
    font-size: 12px;
}


.img{
    width: 115px;
    height: 72px;
    overflow: hidden;
}

.img>img{
    width: 100%;
}

.back_btn{
    color: #ffffff;
    font-size: 16px;
}

.back_btn::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 3px solid #ffffff;
    border-top: 3px solid #ffffff;
    transform: rotate(-45deg);
}

.searchbox{
    height: 65px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.searchbar{
    border: 1px solid #888888;
    height: 34px;
    border-radius: 5px;
    width: 100%;
    display: flex;
    align-items: center;
}
.searchbar>input{
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    height: 32px;
    outline: none;
    text-indent: 10px;
    font-size: 16px;
    color: #c4c4c4;
}

.searchbar>span{
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(${src2}) no-repeat;
    background-size: 70%;
    background-position: center;
    margin-right: 10px;
}

`

class Search extends Component {
    state = {
        word: '',
        list: []
    }
    //页面返回时展示上一次查询结果
    componentDidMount() {
        var hos = localStorage.getItem('ls')
        if (hos) {
            this.setState({
                list: JSON.parse(hos)
            })
            // console.log(this.state.list)
        } else {
            this.setState({
                list: []
            })
        }
    }

    //绑定表单为受控组件
    texts = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    //点击搜索图标发送请求
    ss = () => {
        axios.post('/search', { keyword: this.state.word }).then(res => {
            if (res.status === 'success') {
                this.setState({
                    list: res.data
                })
                //将本次查询结果放到本地存储中
                let cen = JSON.stringify(this.state.list)
                localStorage.setItem('ls', cen)
            }
        }).catch(err => {
            console.log(err)
        })
    }
    //按下回车键进行搜索
    enterd = (e) => {
        if (e.keyCode == '13') {
            this.ss()
        }
    }
    //返回按钮
    goback = () => {
        this.props.history.go(-1)
        localStorage.removeItem('ls')
    }
    //点击跳转相关新闻
    goinfo(id) {
        this.props.history.push('/newsinfo/' + id)
    }

    //页面布局
    render() {
        return (<>
            <SearchDiv>
                <div className="head">
                    <a className="back_btn" onClick={this.goback}>返回</a>
                </div>

                <div className="searchbox">
                    <div className="searchbar">
                        <input type="text" onChange={this.texts} name='word' value={this.state.word} onKeyUp={this.enterd.bind(this)} />
                        <span onClick={this.ss}></span>
                    </div>
                </div>

                <div className="content">
                    <ul>
                        {
                            this.state.list.map((item, index) => {
                                if (item.type === '财经') {
                                    return (
                                        <li key={item._id} onClick={this.goinfo.bind(this, item._id)}>
                                            <div className="info">
                                                <div className="title">{item.title}</div>
                                                <div className="something">
                                                    <span className="m_r10">{item.media}-{item.type}</span>
                                                    <span>{format.toYMD(item.pubtime)}</span>
                                                </div>
                                            </div>
                                            {
                                                item.img && item.img !== "none" ? <div className="img">
                                                    <img src={item.img} />
                                                </div> : ''
                                            }

                                        </li>
                                    )
                                } else {
                                    return (
                                        <li key={item._id} onClick={this.goinfo.bind(this, item._id)}>
                                            <div className="info">
                                                <div className="title">{item.title}</div>
                                                <div className="something">
                                                    <span className="m_r10">{item.source}-{item.type}</span>
                                                    <span>{format.toYMD(item.time)}</span>
                                                </div>
                                            </div>
                                            {
                                                item.img && item.img !== "none" ? <div className="img">
                                                    <img src={item.img} />
                                                </div> : ''
                                            }

                                        </li>
                                    )
                                }

                            })
                        }

                    </ul>
                </div>
            </SearchDiv>
        </>
        );
    }
}

export default Search;
